{{ define "admin/book/index.html" }}
{{ template "public/header.html" .}}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:50px;':'margin-top:10px;'">
    <tab-tag v-if="!urlobj.dialogstate"></tab-tag>
    <el-card shadow="never" style="min-height:650px;">
        <div v-if="search_visible" id="search" class="search">
            <el-form ref="form" size="small" :model="searchData" inline>
                <el-form-item label="标题">
                    <el-input id="title" v-model="searchData.title"  style="width:150px;" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select style="width:150px" v-model="searchData.status" filterable clearable placeholder="请选择">
                        <el-option key="0" label="开启" value="1"></el-option>
                        <el-option key="1" label="关闭" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="daterange" v-model="searchData.add_time" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <search-tool :page_data.sync="page_data" :search_data.sync="searchData" @refesh_list="index"></search-tool>
            </el-form>
        </div>
        <div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
            <div>
                <el-button v-for="item in button_group" v-if="checkPermission(item.access)" :key="item.access"  :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
                    <span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
                    <span v-else v-text="item.name"></span>
                </el-button>
            </div>
            <div><table-tool tableid="role" :search_visible.sync="search_visible"   @refesh_list="index"></table-tool></div>
        </div>
        <el-table id="book" :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @sort-change='sortChange' v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
            <el-table-column align="center" type="selection" width="42"></el-table-column>
            <el-table-column align="center" type = '' property="id"  label="编号"  width="70">
            </el-table-column>
            <el-table-column align="center"  property="title"  label="标题"  width="400">
            </el-table-column>
            <el-table-column align="center"  property="read"  label="文档数"  width="">
            </el-table-column>
            <el-table-column align="center"  property="is_home"  label="首页显示"  width="">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.is_home == 0" size="mini" effect="dark">否</el-tag>
                    <el-tag type="info" v-if="scope.row.is_home == 1" size="mini" effect="dark">是</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center"  property="sort"  label="排序"  width="">
                <template class="sort" slot-scope="scope">
                    <el-input v-if="checkPermission('/admin/book/updateExt')" @blur.stop="updateExt(scope.row,'sort')"  size="mini" placeholder="排序" v-model="scope.row.sort" ></el-input>
                    <el-input v-else @blur.stop="updateExt(scope.row,'sort')"  size="mini" placeholder="排序" v-model="scope.row.sort" disabled="true"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center"  property="status"  label="状态"  width="">
                <template slot-scope="scope">
                    <el-switch v-if="checkPermission('/admin/book/updateExt')" @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
                    <el-switch v-else @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status" disabled="true"></el-switch>
                </template>
            </el-table-column>
            <el-table-column align="center"  property="add_time"  label="创建时间"  width="150">
                <template slot-scope="scope">
                    {{ "{{parseTime(scope.row.add_time,'{y}-{m}-{d} {h}:{i}:{s}')}}" }}
                </template>
            </el-table-column>
            <el-table-column align="center"  property="update_time"  label="更新时间"  width="150">
                <template slot-scope="scope">
                    {{ "{{parseTime(scope.row.update_time,'{y}-{m}-{d} {h}:{i}:{s}')}}" }}
                </template>
            </el-table-column>
            <el-table-column :fixed="ismobile()?false:'right'" label="操作" align="center" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.id">
                        <el-button v-if="checkPermission('/admin/doc/index')" size="mini" icon="el-icon-document" type="info" @click="jumpDoc(scope.row)">详情</el-button>
                        <el-button v-if="checkPermission('/admin/book/update')" size="mini" icon="el-icon-edit" type="primary" @click="update(scope.row)" >修改</el-button>
                        <el-button v-if="checkPermission('/admin/book/delete')" size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row)" >删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
    </el-card>
    <!--添加-->
    <Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
    <!--修改-->
    <Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>
</div>
<script src="/static/admin/js/app.js"></script>
<script src="/static/components/admin/book/add.js?v={{.v}}"></script>
<script src="/static/components/admin/book/update.js?v={{.v}}"></script>
<script>
    new Vue({
        el: '#app',
        components:{
        },
        data: function() {
            return {
                dialog: {
                    addDialogStatus : false,
                    updateDialogStatus : false,
                },
                searchData:{},
                button_group:[
                    {name:'添加知识库',color:'success',access:'/admin/book/add',icon:'el-icon-plus',disabled:'',clickname:'add'},
                    {name:'删除',color:'danger',access:'/admin/book/delete',icon:'el-icon-delete',disabled:'multiple',clickname:'del'},
                ],
                loading: false,
                page_data: {
                    limit: 20,
                    page: 1,
                    total:20,
                },
                order:'',
                sort:'',
                ids: [],
                single:true,
                multiple:true,
                search_visible:true,
                left_expand:true,
                list: [],
                updateInfo:{},
            }
        },
        methods:{
            index(){
                let param = {limit:this.page_data.limit,page:this.page_data.page,order:this.order,sort:this.sort}
                Object.assign(param, this.searchData,this.urlobj)
                this.loading = true
                axios.post(base_url + '/admin/book/list',param).then(res => {
                    if(res.data.status == 200){
                        this.list = res.data.data.data
                        this.page_data.total = res.data.data.total
                        this.loading = false
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            },
            updateExt(row,field){
                if(row.id){
                    axios.post(base_url + '/admin/book/updateExt',{id:row.id,[field]:row[field]}).then(res => {
                        if(res.data.status == 200){
                            this.$message({message: res.data.msg, type: 'success'})
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    })
                }
            },
            add(){
                this.dialog.addDialogStatus = true
            },
            update(row){
                let id = row.id ? row.id : this.ids.join(',')
                axios.post(base_url + '/admin/book/getUpdateInfo',{id:id}).then(res => {
                    if(res.data.status == 200){
                        this.dialog.updateDialogStatus = true
                        this.updateInfo = res.data.data
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            del(row){
                this.$confirm('确定操作吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = row.id ? row.id : this.ids.join(',')
                    axios.post(base_url + '/admin/book/delete',{id:ids}).then(res => {
                        if(res.data.status == 200){
                            this.$message({message: res.data.msg, type: 'success'})
                            this.index()
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    })
                }).catch(() => {})
            },
            selection(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            handleRowClick(row, rowIndex,event){
                if(event.target.className !== 'el-input__inner'){
                    this.$refs.multipleTable.toggleRowSelection(row)
                }
            },
            rowClass ({ row, rowIndex }) {
                for(let i=0;i<this.ids.length;i++) {
                    if (row.id === this.ids[i]) {
                        return 'rowLight'
                    }
                }
            },
            sortChange(val){
                if(val.order == 'descending'){
                    this.order= 'desc'
                }
                if(val.order == 'ascending'){
                    this.order= 'asc'
                }
                this.sort = val.prop
                this.index()
            },
            jumpDoc(row){
                console.log(row.id)
                window.location.href = "/admin/doc/index?book_id="+row.id
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children
                }
                return {
                    id: node.val,
                    label: node.key,
                    children: node.children
                }
            },
            fn(method){
                this[method](this.ids)
            },
        },
        mounted(){
            this.index()
        },
    })
</script>
{{ template "public/footer.html" .}}
{{ end }}